<template>
  <view class="goods-item" :class="{ 'active': selectedIndex === index }" @mouseenter="hoverIndex = index"
    @mouseleave="hoverIndex = null" @click="$emit('select', index)">
    <!-- 左侧盒子 -->
    <view class="goods-item-left">
      <image :src="item.goods_small_logo || defaultPic" class="goods-pic" alt="商品图片"></image>
    </view>
    <!-- 右侧盒子 -->
    <view class="goods-item-right">
      <view class="goods-name">{{ item.goods_name }}</view>
      <view class="goods-infoBox">
        <view class="goods-price">￥{{ toFixedPrice(item.goods_price) }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "my-goods",
  props: {
    item: {
      type: Object,
      default: {}
    },
    selectedIndex: {
      type: Number,
      default: null
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      defaultPic: 'https://th.bing.com/th/id/R.7b1a08b9cad671ec7cd3f40a937cf90c?rik=bscFCAJCax1ZJg&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f03%2f29%2f32fd5b5d10ca51980988fedeb9ecd694.jpg&ehk=EBfBi6AGEGxpmzZ4S6BvITM75dU67ZEekiA%2bh0bxbtc%3d&risl=&pid=ImgRaw&r=0'
    }
  },
  methods: {
    toFixedPrice(num) {
      return num ? Number(num).toFixed(2) : "0.00";
    }
  }
}
</script>

<style lang="scss">
/* 商品项 */
.goods-item {
  display: flex;
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease-in-out;
  margin-bottom: 13px;
  cursor: pointer;
  position: relative; // 使光晕效果更加明显

  /* 悬浮特效 */
  &:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 182, 193, 0.5);
    /* 粉色柔光环绕 */
  }
}

/* 选中状态 */
.goods-item.active {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 105, 180, 0.6);
  /* 选中后加深光晕 */
}

/* 左侧图片 */
.goods-item-left {
  border-radius: 10px;
}

/* 商品图片 */
.goods-pic {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

/* 右侧信息 */
.goods-item-right {
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 商品名称 */
.goods-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}

/* 商品价格 */
.goods-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff4c4c;
}
</style>